<section class="todoapp">
  <header class="header">
    <h1>todos</h1>
    <input class="new-todo" placeholder="What needs to be done?" autofocus (keyup.enter)="addTodo($event)">
  </header>
  <ng-template [ngIf]="todos.length">
    <!-- This section should be hidden by default and shown when there are todos -->
  <section class="main">
    <input id="toggle-all" class="toggle-all" type="checkbox" (change)="toggleAll=$event.target.checked" [checked]="toggleAll">
    <label for="toggle-all">Mark all as complete</label>
    <ul class="todo-list">
      <!-- These are here just to show the structure of the list items -->
      <!-- List items should get the class `editing` when editing and `completed` when marked as completed -->
      <!-- 
        li 是每一个任务项
        每个任务项有三种状态
          正常状态 没有样式
          完成状态 completed
          编辑状态 editing
       --> 
      <li *ngFor="let todo of filterTodos; let i = index;" [ngClass]="{completed: todo.done, editing: currentEditing === todo}">
        <div class="view">
          <input class="toggle" type="checkbox" [(ngModel)]="todo.done">
          <label (dblclick)="currentEditing = todo"> {{ todo.title }} </label>
          <button class="destroy" (click)="removeTodo(i)"></button>
        </div>
        <input class="edit"
         [value]="todo.title"
         (keyup.enter)="saveEdit(todo,$event)"
         (keyup) = "handleEditKeyUp($event)" 
         (blur)="saveEdit(todo,$event)">
      </li>
    </ul>
  </section>
  <!-- This footer should hidden by default and shown when there are todos -->
  <footer class="footer">
    <!-- This should be `0 items left` by default -->
    <span class="todo-count"><strong> {{ remaningCount }} </strong> item left</span>
    <!-- Remove this if you don't implement routing -->
    <ul class="filters">
      <li>
        <a [ngClass]="{ selected: visibility == 'all' }" href="#/">All</a>
      </li>
      <li>
        <a [ngClass]="{ selected: visibility == 'active' }" href="#/active">Active</a>
      </li>
      <li>
        <a [ngClass]="{ selected: visibility == 'completed' }" href="#/completed">Completed</a>
      </li>
    </ul>
    <!-- Hidden if no completed items are left ↓ -->
    <button class="clear-completed" (click)="clearAllDone()">Clear completed</button>
  </footer>
  </ng-template>
  
</section>
<footer class="info">
  <p>Double-click to edit a todo</p>
  <!-- Remove the below line ↓ -->
  <p>Template by <a href="http://sindresorhus.com">Sindre Sorhus</a></p>
  <!-- Change this out with your name and url ↓ -->
  <p>Created by <a href="http://todomvc.com">you</a></p>
  <p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</footer>